<template>
  <div class="forget-page">
    <mt-header fixed title="修改密码">
      <div slot="left" @click="$router.go(-1)">
        <mt-button icon="back"></mt-button>
      </div>
    </mt-header>
    <div style="height:10px"></div>
    <mt-field type="password" placeholder="旧密码" v-model="oldpwd"></mt-field>
    <mt-field type="password" placeholder="新密码" v-model="newpwd"></mt-field>
    <mt-field type="password" placeholder="确认密码" v-model="newpwd2"></mt-field>
    <section class="setname">
      <p class="unlikep">密码长度5到24位之间</p>
      <button class="submit" @click="submit()">确认并保存</button>
    </section>
  </div>
</template>

<script>
import { Toast } from "mint-ui";
import { resetPassword } from "~/assets/service/user";
import md5 from "js-md5";
export default {
  data() {
    return {
      oldpwd: "",
      newpwd: "",
      newpwd2: "",
    };
  },
  head: {
    title: "修改密码",
  },
  methods: {
    async submit() {
      if (this.oldpwd === "") {
        Toast("旧密码不能为空！");
        return;
      }
      if (this.newpwd === "") {
        Toast("请输入新密码！");
        return;
      }
      if (this.newpwd2 === "") {
        Toast("请再次输入新密码！");
        return;
      }
      if ((this.newpwd !== this, newpwd2)) {
        Toast("两次输入密码不一致！");
      }
      const { code } = await resetPassword({
        oldpassword: thi.oldpwd,
        newpassword: this.newpwd,
      });

      if (code === 0) {
        Toast("修改成功");
        setTimeout(() => {
          this.$router.go(-1);
        }, 1000);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~assets/styles/mixin";
.forget-page {
  padding: px2rem(88px) 0 0 0;
  .setname {
    padding: 0 px2rem(30px);
    p {
      width: 100%;
      @include sc(0.4rem, #666);
      padding: 0.4rem 0 1rem;
    }

    .unlikep {
      @include sc(0.58rem, #a9a9a9);
      padding: px2rem(20px) 0;
    }
    .submit {
      background: #56d176;
      width: 100%;
      height: px2rem(96px);
      color: #fff;
      border: none;
      font-size: px2rem(34px);
      border-radius: 8px;
    }
  }
}
</style>